<template>
    <div class="home">
        <div class="content">
            <template v-if="tmpDate.length > 0">
                <div class="yes">
                    <ul>
                        <li v-for="item in tmpDate" :key="item.id" @click="btnGetPost(item.id)">
                            <h4>{{ item.title }}</h4>
                            <p>
                                <span class="iconfont icon-zuozhe icon"></span>
                                <span>&ensp;{{ item.userName }}&ensp;|&ensp;</span>
                                <span class="iconfont icon-createTime icon"></span>
                                <span>&ensp;{{ item.createdAt }}&ensp;|&ensp;</span>
                                <span class="iconfont icon-xiugaishijian icon"></span>
                                <span>&ensp;{{ item.updatedAt }}&ensp;|&ensp;</span>
                                <span class="iconfont icon-yanjing icon"></span>
                                <span>&ensp;{{ formatViewCount(item.views) }}</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </template>
            <template v-else>
                <div class="no">
                    <span class="iconfont icon-kongxiangzi icon"></span>
                    <p>还没有作品，你也开始创作吧</p>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue"
import axios from "axios"
import { useRoute, useRouter } from "vue-router"

const route = useRoute()
const router = useRouter()

let tmpDate = ref([])

function formatViewCount(views) {
    if (!views) return "0"
    if (views < 1000) return views.toString()
    if (views < 1000000) return (views / 1000).toFixed(1) + "k"
    if (views < 1000000000) return (views / 1000000).toFixed(1) + "M"
    return (views / 1000000000).toFixed(1) + "B"
}

watch(() => route.query.keyword, (newKeyword) => {
    axios({
        method: "get",
        url: `http://127.0.0.1:8000/api/post?keyword=${newKeyword}`
    })
        .then((res) => {
            tmpDate.value = res.data.data
        })
        .catch((err) => {
            console.log(err)
        })
})

onMounted(() => {
    axios({
        method: "get",
        url: "http://127.0.0.1:8000/api/post"
    })
        .then((res) => {
            tmpDate.value = res.data.data
        })
        .catch((err) => {
            console.log(err)
        })
})

function btnGetPost(id) {
    router.push({
        path: `/read/${id}`
    })
}
</script>

<style scoped>
.home {
    width: 80%;
    height: 93vh;
    background-color: white;
    margin: 1vh;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.content {
    width: 100%;
    height: 94%;
}

.icon {
    font-size: 100px;
    background-image: linear-gradient(45deg, rgb(112, 222, 255), rgb(198, 118, 255));
    color: transparent;
    background-clip: text;
    margin-bottom: 20px;
}

.yes .icon {
    margin: 0;
}

.content .yes {
    width: 100%;
    height: 98%;
    margin-top: 1%;
}

.content .yes ul {
    width: 100%;
    height: 97.5%;
    overflow-y: auto;
    list-style: none;
}

.content .yes li {
    width: 100%;
    height: 15%;
    border-bottom: 1px solid rgb(223, 223, 223);
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.content .yes li:hover {
    background-color: rgb(235, 235, 235);
}

.content .yes p {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.content .yes p .icon:nth-child(1) {
    font-size: 15px;
}

.content .yes p .icon:nth-child(3) {
    font-size: 26px;
}

.content .yes p .icon:nth-child(5) {
    font-size: 19px;
}

.content .yes p .icon:nth-child(7) {
    font-size: 19px;
}

.content .yes .operate {
    position: absolute;
    right: 10px;
    width: 5%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.content .yes .operate span:nth-child(1) {
    font-size: 16px;
}

.content .yes .operate span:nth-child(2) {
    font-size: 16px;
}

.content .no {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
}

.content .no p {
    background-image: linear-gradient(45deg, rgb(112, 222, 255), rgb(198, 118, 255));
    color: transparent;
    background-clip: text;
}
</style>